<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FileReader</title>
</head>
<body>
	<form enctype="multipart/form-data" name="form1">
		<input type="file" id="upload" name="upload" onchange="change()" />
		<p>预览:</p>
		<p>
			<img id="preview" alt="" name="pic" />
		</p>
	</form>
	<script type="text/javascript">
		function change() {
			var //
			pic = document.getElementById('preview'), //
			upload = document.getElementById('upload'), //
			ext = (function(path) {
				return path.substring(path.lastIndexOf('.') + 1).toLowerCase();
			})(upload.value)

			// gif在IE浏览器暂时无法显示
			if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
				alert('图片的格式必须为png或者jpg或者jpeg格式！');
				return;
			}

			if (typeof FileReader != 'undefined') {
				var file = upload.files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					pic.src = this.result;
				}
			} else {

				var userAgent = navigator.userAgent, //
				isIE = userAgent.match(/MSIE/) != null, //
				isIE6 = userAgent.match(/MSIE 6.0/) != null;

				if (isIE) {
					upload.select();
					var reallocalpath = document.selection.createRange().text;
					// IE6浏览器设置img的src为本地路径可以直接显示图片
					if (isIE6) {
						pic.src = reallocalpath;
					} else {
						// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
						pic.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",src="' + reallocalpath + '")';
						// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
						pic.src = '';
					}
				}

			}
		}
	</script>
</body>
</html>